<template>
    <!--这里是购物车的首页-->
    <div class="viewport shopCart">
        <!--这个是头部显示的-->
        <div class="titleBar viewport">
            <div class="tit">
                <span>购物车</span>
                <i id="cartNum">（0）</i>
            </div>
            <div class="bar-right">
                <span class="icon">
                    <img class="msg" onclick="tousermsg()" src="@/assets/img/icon-message.png" alt="">
                    <!-- <i>1</i> -->
                </span>
                <span class="optText" id="cartEdit">
                    <i>编辑</i>
                    <i>完成</i>
                </span>
            </div>
        </div>
        <!--加入购车显示的列表-->
        <!-- <div class="nothing-shopping">
            <img class="" src="@/assets/img/noshoping.png">
        </div> -->
        <div class="cartMain">
            <ul>
                <li>
                    <div class="radio-box">
                        <label class="radio-btn">
                        <input class="shopcarId" type="text" value="6190449028200068" hidden="">
                        </label>
                    </div>
                    <div class="pro-box">
                        <div class="img">
                        <a>
                            <img src="https://image.jianke.com/upload/prodimage/201606wm/2016625103445693.jpg" alt="">
                        </a>
                        </div>
                        <div class="info">
                            <div class="name">
                                <a href="/m/mproduct?id=805153993">杜蕾斯避孕套魔法装(情趣系列)</a>
                            </div>
                            <div class="prop">
                                52mm 18只(情趣系列) 
                            </div>
                            <div class="opt">
                                <div class="amount-widget" data-max="100">
                                    <input class="skuId" type="text" value="805153993" hidden="">
                                    <input class="productNum" type="text" value="1" hidden="">
                                    <button class="reduce" type="button">-</button>
                                    <input class="num" type="text" value="1">
                                    <button class="add" type="button">+</button>
                                </div>
                                <div class="price">
                                    <i>￥</i>
                                    <span>69.9</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="radio-box">
                        <label class="radio-btn">
                        <input class="shopcarId" type="text" value="6190449028200068" hidden="">
                        </label>
                    </div>
                    <div class="pro-box">
                        <div class="img">
                        <a>
                            <img src="https://image.jianke.com/upload/prodimage/201606wm/2016625103445693.jpg" alt="">
                        </a>
                        </div>
                        <div class="info">
                            <div class="name">
                                <a href="/m/mproduct?id=805153993">杜蕾斯避孕套魔法装(情趣系列)</a>
                            </div>
                            <div class="prop">
                                52mm 18只(情趣系列) 
                            </div>
                            <div class="opt">
                                <div class="amount-widget" data-max="100">
                                    <input class="skuId" type="text" value="805153993" hidden="">
                                    <input class="productNum" type="text" value="1" hidden="">
                                    <button class="reduce" type="button">-</button>
                                    <input class="num" type="text" value="1">
                                    <button class="add" type="button">+</button>
                                </div>
                                <div class="price">
                                    <i>￥</i>
                                    <span>69.9</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="recommend-tit">为你推荐</div>
            <div class="pro-container large-show">
            <ul class="clearfix">
                <li>
                    <a href="javascript:gotoProductDetail('6010663384600162');">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:gotoProductDetail('6010773648000162');">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodPic/20181127/if935lmEtYKETCq.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 8 Plus</div>
                        <div class="price">
                        <i>￥</i>5699</div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:gotoProductDetail('6010773648000162');">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodPic/20181127/if935lmEtYKETCq.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 8 Plus</div>
                        <div class="price">
                        <i>￥</i>5699</div>
                    </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:gotoProductDetail('6010773648000162');">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodPic/20181127/if935lmEtYKETCq.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 8 Plus</div>
                        <div class="price">
                        <i>￥</i>5699</div>
                    </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 这是结算按钮模块 -->
        <div class="cart-bottom viewport">
            <div class="bottom-settle">
            <div class="settle-l">
                <span class="checkall">
                <label class="radio-btn"></label>全选</span>
                <div class="sum">合计：
                <em>¥
                    <i id="orderTotal">0</i>
                </em>
                </div>
            </div>
            <div class="settle-r">
                <input id="settlement" type="button" value="结算" class="settle-btn">
            </div>
            </div>
            <div class="bottom-opt hidden">
            <span class="checkall">
                <label class="radio-btn"></label>全选</span>
            <a class="delete" id="cartDelete" href="#">删除</a>
            <!-- <a class="collect">移入收藏夹</a>  // 20180912需求进行修改取消移入收藏夹功能-->
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'shopCart',
  data () {
    return {
        
    }
  },
  created(){
    document.documentElement.scrollTop = 0;
  },
  components:{
  }
}
</script>
<style scoped>

.shopCart{
    background: #f2f2f2;
    padding-top: 0.16rem;
    padding-bottom: 0.32rem;
}
.nothing-shopping{
    background: #fff;
    text-align: center;
    padding: 2.0rem 0;
}
.nothing-shopping img{
    width: 1.4rem;
    height: 2.0rem;
}
.cartMain {
    margin: .88rem .16rem 0 .16rem;
}
.cartMain > ul > li, .invalid-main > ul > li {
    margin-top: .16rem;
    height: 2.44rem;
    border-radius: 0.16rem;
    background: #fff;
}
.cartMain > ul > li:last-child, .invalid-main > ul > li:last-child {
    margin-bottom: 0;
}
.cartMain > ul > li .radio-box, .invalid-main > ul > li .radio-box {
    float: left;
    margin-right: .16rem;
    padding-top: .58rem;
}
.radio-btn {
    display: inline-block;
    width: .8rem;
    height: .8rem;   
    background-image: url(../../../assets/img/radio_unselected.png);
    background-size: 100% 100%;
}
.radio-btn.active {
    background-image: url(../../../assets/img/radio_selected.png);
}
.cartMain > ul > li .pro-box, .invalid-main > ul > li .pro-box {
    padding-top: .16rem;
    height: 2.44rem;
    overflow: hidden;
}
.cartMain > ul > li .pro-box .img, .invalid-main > ul > li .pro-box .img {
    float: left;
    margin-right: .32rem;
    width: 1.8rem;
    height: 1.8rem;
}
.cartMain > ul > li .pro-box .img img, .invalid-main > ul > li .pro-box .img img {
    width: 100%;
    height: 100%;
}
.cartMain > ul > li .pro-box .info, .invalid-main > ul > li .pro-box .info {
    height: 100%;
    overflow: hidden;
}
.cartMain > ul > li .pro-box .info .name, .invalid-main > ul > li .pro-box .info .name {
    font-size: .3rem;
    height: .8rem;
    line-height: .4rem;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: box;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cartMain > ul > li .pro-box .info .prop, .invalid-main > ul > li .pro-box .info .prop {
    margin: .1rem 0;
    font-size: .26rem;
    color: #666;
}
.cartMain > ul > li .pro-box .info .opt, .invalid-main > ul > li .pro-box .info .opt {
    position: relative;
}
.cartMain > ul > li .pro-box .info .amount-widget, .invalid-main > ul > li .pro-box .info .amount-widget {
    position: absolute;
    right: .1rem;
}
.num{
    width: .84rem;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: .3rem;
    text-align: center;
    color: #64DCAA;
    border: 1px solid #57D9A3;
    vertical-align: 4%;
}
 .reduce,.add{
    color: rgb(135, 165, 216);
    background: #fff;
    border: 1px solid #f2f2f2;
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    line-height: 0.5rem;
    margin-right:-.08rem;
}
.add{
    margin-right:0px;
    margin-left:-.10rem;
}
.cartMain > ul > li .pro-box .info .opt .price, .invalid-main > ul > li .pro-box .info .opt .price {
    font-size: .34rem;
    color: #FF4F00;
}
.cartMain > ul > li .pro-box .info .opt .price i, .invalid-main > ul > li .pro-box .info .opt .price i {
    font-size: .2rem;
}
/* 这是结算按钮模块 */
.cart-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
    height: 1.28rem;
    line-height: 1.28rem;
    background: #fff;
}
.cart-bottom .bottom-settle {
    height: 100%;
}
.cart-bottom .settle-l {
    float: left;
    padding: 0 .32rem 0 .16rem;
    width: 5.12rem;
    height: 100%;
    background: #fff;
    border-top: 1px solid #F2F2F2;
}
.cart-bottom .checkall {
    font-size: .3rem;
    color: #828D93;
}
.cart-bottom .radio-btn {
    position: relative;
    top: .24rem;
}
.cart-bottom .settle-l .sum {
    float: right;
    font-size: .34rem;
    color: #FF4F00;
}
.cart-bottom .settle-r {
    height: 100%;
    overflow: hidden;
}
.cart-bottom .settle-r .settle-btn {
    width: 100%;
    height: 1.28rem;
    font-size: .34rem;
    color: #fff;
    background-color: #FFAB00;
    border-radius: 0;
}
.cart-bottom .bottom-opt {
    border-top: 1px solid #F2F2F2;
    padding: 0 .32rem 0 .16rem;
}
.cart-bottom .bottom-opt > a.delete {
    width: 1.28rem;
    color: #666;
    border: 1px solid #9c9c9c;
}

.cart-bottom .bottom-opt > a {
    float: right;
    margin-top: .32rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .26rem;
    text-align: center;
    border-radius: 99999px;
}
</style>
